import React from 'react'
import { dictionary } from '../../../utils/dictionary';
import { Form, Input, Select, DatePicker, Checkbox } from 'antd'
import CheckboxGroup from 'antd/lib/checkbox/Group';
import { help } from '../../../utils/help';
import { axhttp } from '../../../utils/axhttp';
const FormItem = Form.Item;
const Option = Select.Option;

const url = {
    readx: '/api/role/readx',
}
class FormComponent extends React.Component {
    /** 状态数据 */
    state = {
        /** 角色信息 */
        roles: [],
    }

    componentDidMount() {
        axhttp.getXhr(url.readx).then(res => {
            this.setState({ roles: help.transToStandardData(res.data.list, 'id', 'roleName') });
        });
    }

    /** 选择时，将名称保存到对应的表单字段中 */
    handleChangeRole = (roleId) => {
        const { form } = this.props;
        const { roles } = this.state;

        form.setFieldsValue({
            roleName: roles.find(i => i.value == roleId).text,
        });
    }

    render() {
        const { form, values = {} } = this.props;
        const { roles } = this.state;
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 }
        };

        return (
            <Form layout="horizontal">
                <FormItem label="用户角色" {...formItemLayout}>
                    {
                        getFieldDecorator('roleId', {
                            /** 初始值 */
                            initialValue: values.roleId,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '角色不能为空'
                                }
                            ]
                        })(
                            <Select type="text" placeholder="请选择角色" onChange={this.handleChangeRole}>
                                {roles.map(m => (<Option value={m.value} key={m.value}>{m.text}</Option>))}
                            </Select>
                        )
                    }
                </FormItem>
                <div style={{ display: 'none' }}>
                    <FormItem label="角色名称" {...formItemLayout}>
                        {
                            getFieldDecorator('roleName', {
                                /** 初始值 */
                                initialValue: values.roleName,
                            })(
                                <Input type="text" hidden={true} />
                            )
                        }
                    </FormItem>
                </div>
                <FormItem label="用户名" {...formItemLayout}>
                    {
                        getFieldDecorator('username', {
                            /** 初始值 */
                            initialValue: values.username,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '用户名不能为空'
                                }
                            ]
                        })(
                            <Input type="text" placeholder="请输入姓名" />
                        )
                    }
                </FormItem>
                <FormItem label="密码" {...formItemLayout}>
                    {
                        getFieldDecorator('password', {
                            /** 初始值 */
                            initialValue: values.password,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '密码不能为空'
                                }
                            ]
                        })(
                            <Input.Password placeholder="请输入密码" />
                        )
                    }
                </FormItem>
                <FormItem label="手机号" {...formItemLayout}>
                    {
                        getFieldDecorator('mobile', {
                            /** 初始值 */
                            initialValue: values.mobile,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '请输入正确的手机号',
                                    /** 正则表达式，用来验证填写的数据 */
                                    pattern: /^1[3456789]\d{9}$/,
                                }
                            ]
                        })(
                            <Input type="text" placeholder="请输入手机号" />
                        )
                    }
                </FormItem>
                <FormItem label="性别" {...formItemLayout}>
                    {
                        getFieldDecorator('sex', {
                            /** 初始值 */
                            initialValue: values.sex
                        })(
                            <Select placeholder="请选择性别">
                                {dictionary.sex.map(m => (<Option value={m.value} key={m.value}>{m.text}</Option>))}
                            </Select>
                        )}
                </FormItem>
                <FormItem label="状态" {...formItemLayout}>
                    {
                        getFieldDecorator('state', {
                            /** 初始值 */
                            initialValue: values.state
                        })(
                            <Select placeholder="请选择状态">
                                {dictionary.commonState.map(m => (<Option value={m.value} key={m.value}>{m.text}</Option>))}
                            </Select>
                        )}
                </FormItem>
                <FormItem label="爱好" {...formItemLayout}>
                    {
                        getFieldDecorator('hobby', {
                            /** 初始值 */
                            initialValue: values.hobby && values.hobby.split(',')
                        })(
                            <CheckboxGroup>
                                {dictionary.hobby.map(m => (<Checkbox value={m.value} key={m.value}>{m.text}</Checkbox>))}
                            </CheckboxGroup>
                        )}
                </FormItem>
                <FormItem label="生日" {...formItemLayout}>
                    {
                        getFieldDecorator('birthday', {
                            /** 初始值 */
                            initialValue: help.transDateTime(values.birthday, 'YYYY-MM-DD')
                        })(
                            <DatePicker
                                format='YYYY-MM-DD'
                            />
                        )}
                </FormItem>
                <FormItem label="联系地址" {...formItemLayout}>
                    {
                        getFieldDecorator('address', {
                            /** 初始值 */
                            initialValue: values.address
                        })(
                            <Input.TextArea rows={3} placeholder="请输入联系地址" />
                        )}
                </FormItem>
            </Form>
        );
    }
}

export default Form.create({})(FormComponent);